<template>
   <div id="login" class="login" style="margin: 0px auto; ">
	   <div class="card">
		  	<center>
		  	<form id="" class="form" style="">
				<span id="title" style="">客户信息管理平台</span>
		  		<br />
		  		<input type="text" class="username" v-model="username" value="" autofocus="autofocus" placeholder="请输入用户名" />
		  		<br />
		  		<br />
		  	    <input type="password" class="password" v-model="password" value="" placeholder="请输入密码" />
		  		<br />
		  		<br />
		  		<input class="submit" type="submit" style="background-color: #66AFE9;" @click="LoginHandle()" value="登录" />
		  		<br />
		  		<br />
		  	</form>
		  </center> 
	   </div>
   
   </div>
</template>
<script>
import {
		mapActions
	} from 'vuex';
	export default {
		name: "Login",
		data() {
			return {
				username: "",
				password: "",
				list: []
			}
		},
	
	created() {
		
	},
		methods: {
			
				...mapActions([
				'changeLogin',
				'changeUsername',
				'changePassword']
				
			),
			
			LoginHandle() {
				if (!this.username || !this.password){
					alert("未登录")
					return;
				}
				this.$store.dispatch('changeLogin', true)
				this.$store.dispatch('changeUsername', this.username)
				this.$store.dispatch('changePassword', this.password)
					this.$router.push("/info");
			}
			
		}
	}
</script>

<style scoped>
.login{
	height: 697px;
	width: 1350px;
	background: url(../assets/loginBackgroud.jpg);
	background-size: 100% 100%;
}
.card{
		padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
}
.form {

				/* border: solid 1px black; */
				/* margin-left: 500px; */
				/* margin-left: auto; */
				padding-top: 250px;
				width: 250px;
				position: relative;
			}

			input {	
				color: white;
				background-color: transparent;
				width: 250px;
				border: 1px solid #ccc;
				padding: 7px 0px;
				border-radius: 15px;
				
				padding-left: 15px;
				
				text-align: center;
			}

			input:focus {
				border-color: #66afe9;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
			}
			input::-webkit-input-placeholder{
				color: cornflowerblue;
				border-bottom: 1px solid white;
				width: 90%;
				
				
			}
				.submit {
				position: relative;
				margin-left: auto;
				width: 150px;
				padding-left:0px ;
				text-align: center;
			}
			#title{
				 background: linear-gradient(to right, #CCCCCC,  #6495ED);
				  -webkit-background-clip: text;
				  -webkit-text-fill-color:transparent;
			}
</style>